<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="themes/default/layout/public">

<div  layout:fragment="content">
    <p class="mt-10">话题不仅能组织和归类你的内容，还能关联相似的内容。正确的使用话题将让你的问题被更多人发现和解决。</p>
    <div th:if="${#lists.size(categories)>0}" class="widget-category clearfix">
        <div class="col-sm-12">
            <ul class="list">
                <li th:class="${condition.category == null}?'active'"><a href="/questions">全部</a></li>
                <li th:each="category:${categories}" th:classappend="${category.id == condition.category?.id}?'active'"><a th:href="|/topic/${category.slug}|" th:text="${category.name}"></a></li>
            </ul>
        </div>
    </div>

    <div  class="row tag-list mt-20">
        <section th:each="tag:${tags}" class="topic-list-item col-md-3">
            <div class="widget-topic">
                <h2 class="h4">
                    <a th:if="${!#strings.isEmpty(tag.logo)}" th:href="|/topic/${tag.id}|" class="tag-logo" th:style="|background-image: url(${tag.logo});|" th:text="${tag.name}"></a>
                    <a th:if="${#strings.isEmpty(tag.logo)}" th:href="|/topic/${tag.id}|"   th:text="${tag.name}"></a>
                </h2>
                <p>
                    <th:block th:text="${tag.description}?_">暂无介绍</th:block>
                </p>
                <div class="widget-topic-action">
                    <button th:if="${currentUser!=null && tag.attented}" type="button"  class="btn btn-default btn-xs active followTopic mr-5"  th:attr="data-source_type=tag,data-source_id=|${tag.id}|"    data-show_num="false"  data-toggle="tooltip" data-placement="right" title="" data-original-title="关注后将获得更新提醒">已关注</button>
                    <button th:if="${!tag.attented}" type="button"  class="btn btn-default btn-xs followTopic mr-5" th:attr="data-source_type=tag,data-source_id=|${tag.id}|"  data-show_num="false" data-toggle="tooltip" data-placement="right" title="" data-original-title="关注后将获得更新提醒">关注</button>
                    <strong class="follows" th:text="${#sets.size(tag.attentions)}"></strong> <span class="text-muted">关注</span>
                </div>
            </div>
        </section>
    </div>
    <div class="text-center">
        <ul class="pagination">
            <li th:onclick="'javascript:goToPage(1)'" class="page-item" th:classappend="${tags.number+1 == 1}?disabled:''">
                <a class="page-link" th:href="|?page=1&size=${tags.size}&categoryId=${condition.categoryId}|" rel="prev">‹</a>
            </li>
            <li th:each="i:${#numbers.sequence(tags.number+1-6,tags.number+6)}" class="page-item" th:classappend="${tags.number+1 == i}?'active':''" th:if="${i>0 and i<=tags.totalPages}">
                <a class="page-link" th:href="|?page=${i}&size=${tags.size}&categoryId=${condition.categoryId}|" th:text="${i}"></a>
            </li>
            <li th:onclick="'javascript:goToPage('+${tags.totalPages}+')'" class="page-item" th:classappend="${tags.number+1 == tags.totalPages}?disabled:''">
                <a class="page-link" th:href="|?page=${tags.totalPages}&size=${tags.size}&categoryId=${condition.categoryId}|" rel="next">›</a>
            </li>
        </ul>
    </div>
</div>